<template>
  <view class="app-container">
    <!-- 应用内容 -->
    <slot></slot>
    
    <!-- 自定义底部导航栏 -->
    <CustomTabBar :current="currentTab" @tabChange="handleTabChange" />
  </view>
</template>

<script>
export default {
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
}
</script>

<script setup>
import { ref, onMounted } from 'vue';
import CustomTabBar from './components/CustomTabBar.vue';

// 当前选中的tab索引
const currentTab = ref(0);

// 处理tab切换
const handleTabChange = (index) => {
  currentTab.value = index;
};

// 初始化时根据当前页面设置选中的tab
onMounted(() => {
  // 获取当前页面路径
  const pages = getCurrentPages();
  if (pages && pages.length > 0) {
    const currentPage = pages[pages.length - 1];
    const route = currentPage?.route;
    
    // 根据当前路由设置选中tab
    if (route?.includes('pages/index/index')) {
      currentTab.value = 0;
    } else if (route?.includes('pages/post/create')) {
      currentTab.value = 1;
    } else if (route?.includes('pages/user/me')) {
      currentTab.value = 2;
    }
  }
});
</script>

<style lang="scss">
/*每个页面公共css */
page {
	font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	box-sizing: border-box;
}

/* 移除按钮默认样式 */
button {
	margin: 0;
	padding: 0;
	background-color: transparent;
	&::after {
		border: none;
	}
}

@import './static/icon/iconfont.css';
</style>

<style>
/* App容器样式 */
.app-container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); /* 为底部导航预留空间 */
}
</style>
